[#ftl]
[@define "agile.BackgroundEditor","agile._XMetadataEditor"]	[#--background: color position size repeat origin clip attachment image--]
   [#assign templateString]
	<table cellspacing="5px">		
	<tr>
		<td title="{i18n_background_color_tooltip}" class="tooltip" >{i18n_background_color}</td>
		<td>						
			<div data-dojo-type="agile.ColorSelector" class="peditor" data-dojo-props='name:"backgroundColor",htmlName:"background-color"'></div>						
		</td>
		<td title="{i18n_background_clip_tooltip}" class="tooltip" >{i18n_background_clip}</td>
		<td>
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundClip",htmlName:"background-clip",options:"border-box,padding-box,content-box,initial"'></div>					
		</td>	
	</tr>
	<tr>
		<td valign='top' title="{i18n_background_image_tooltip}" class="tooltip" >{i18n_background_image}</td>
		<td colspan="3">
			<div data-dojo-type='agile.UploaderEditor' class="peditor" data-dojo-props='name:"backgroundImage",htmlName:"background-image",tooltip:"{i18n_upload_image}"'></div>
		</td>
	</tr>
	<tr>
		<td title="{i18n_background_repeat_tooltip}" class="tooltip" >{i18n_background_repeat}</td>
		<td>
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundRepeat",htmlName:"background-repeat",options:"repeat,repeat-x,repeat-y,no-repeat"'></div>					
		</td>
		<td nowrap="true" title="{i18n_background_attachement_tooltip}" class="tooltip" >{i18n_background_attachement}</td>
		<td>
			<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundAttachement",htmlName:"background-attachement",options:"scroll,fixed,local"'></div>						
		</td>							
	</tr>
	<tr>
		<td title="{i18n_background_position_tooltip}" class="tooltip" >{i18n_background_position}</td>
		<td>
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundPositionX",htmlName:"background-position",width:"60px",placeHolder:"vertical",options:"top,center,bottom,0%,0",unit:"px"'></div>
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundPositionY",htmlName:"background-position",width:"60px",placeHolder:"horizental",options:"left,center,right,0%,0",unit:"px"'></div>
		</td>
		<td title="{i18n_background_origin_tooltip}" class="tooltip" >{i18n_background_origin}</td>
		<td>
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundOrigin",htmlName:"background-origin",options:"border-box,padding-box,center-box"'></div>				
		</td>					
	</tr>
	<tr>							
		<td title="{i18n_background_size_tooltip}" class="tooltip" >{i18n_background_size}</td>
		<td>					
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundSizeW",htmlName:"background-size",width:"60px",placeHolder:"width",options:"auto,contain,cover,0,0%",unit:"px"'></div>
		<div data-dojo-type='agile.NumberComboBox' class="peditor" data-dojo-props='name:"backgroundSizeH",htmlName:"background-size",width:"60px",placeHolder:"height",options:"0,0%",unit:"px"'></div>					
		</td>
		<td></td>
		<td></td>
	</tr>
</table>
[/#assign]
   templateString:"${templateString?js_string}"
   ,init:function(){
	   this.inherited(arguments);
	   var backgroundAttachementEditor = this.propertyEditors["backgroundAttachement"];
		var backgroundOriginEditor = this.propertyEditors["backgroundOrigin"];
		backgroundAttachementEditor.on("change",function(value){
			backgroundOriginEditor.set("disabled",value == "fixed");
		});
		
		var backgroundImage = this.propertyEditors["backgroundImage"];
		backgroundImage.on("change",lang.hitch(this,function(value){				
			for(var e in this.propertyEditors){
				if(e != "backgroundImage" && e !="backgroundColor" && e != "backgroundClip"){
					this.propertyEditors[e].set("disabled",value?false:true);
				}
			}
		}));
		
		[#--/*background position editor */--]
		var backgroundPositionX = this.propertyEditors["backgroundPositionX"];
		var backgroundPositionY = this.propertyEditors["backgroundPositionY"];
		if(backgroundPositionX && backgroundPositionY){
			var onChangeX = backgroundPositionX.onChange;
			var onChangeY = backgroundPositionY.onChange;
			backgroundPositionX.onChange=function(value,name,htmlName){
				var xy = backgroundPositionY.get("value");
				xy = (value?value:"") + " " + (xy?xy:"");
				onChangeX.apply(backgroundPositionX,[string.trim(xy),"backgroundPosition",htmlName]);
			};
			
			backgroundPositionY.onChange=function(value,name,htmlName){
				var xy = backgroundPositionX.get("value");
				xy = (xy?xy:"") + " " + (value?value:""); 
				onChangeY.apply(backgroundPositionY,[string.trim(xy),"backgroundPosition",htmlName]);
			};
			
			backgroundPositionX.format=function(value){
				return value?value.split(" ")[0]:"";
			};
			backgroundPositionY.format=function(value){
				return value?value.split(" ")[1]:"";
			};
		}
		[#--/*background size editor */--]
		var backgroundSizeW = this.propertyEditors["backgroundSizeW"];
		var backgroundSizeH = this.propertyEditors["backgroundSizeH"];
		if(backgroundSizeW && backgroundSizeH){
			var onChangeX = backgroundSizeW.onChange;
			var onChangeY = backgroundSizeH.onChange;
			backgroundSizeW.onChange=function(value,name,htmlName){
				if(value == "contain" || value == "cover"){
					backgroundSizeH.set("disabled",true);
					onChangeX.apply(backgroundSizeW,[value,"backgroundSize",htmlName]);
				}else{
					backgroundSizeH.set("disabled",false);				
					var xy = backgroundSizeH.get("value");
					xy = (value?value:"") + " " + (xy?xy:"");
					onChangeX.apply(backgroundSizeW,[string.trim(xy),"backgroundSize",htmlName]);
				}
			};
			
			backgroundSizeH.onChange=function(value,name,htmlName){
				if(value == "contain" || value == "cover"){
					backgroundSizeW.set("disabled",true);
					onChangeX.apply(backgroundSizeH,[value,"backgroundSize",htmlName]);
				}else{
					backgroundSizeW.set("disabled",false);
					var xy = backgroundSizeW.get("value");
					xy = (xy?xy:"") + " " + (value?value:""); 
					onChangeY.apply(backgroundSizeH,[string.trim(xy),"backgroundSize",htmlName]);
				}
			};
			
			backgroundSizeW.format=function(value){
				return value?value.split(" ")[0]:"";
			};
			backgroundSizeH.format=function(value){
				return value?value.split(" ")[1]:"";
			};
		}
		
		[#--/*override the parse and format function*/--]
		this.propertyEditors["backgroundImage"].format = function(value){
			return value?value.replace("url(","").replace(")",""):null;
		};
		this.propertyEditors["backgroundImage"].parse = function(value){
			return value?"url(" + value +")":null;
		};
		
		//this.propertyEditors["opacity"]
	}
	,initCustomState:function(widget){
		if(!widget.style1("background-image")){
			for(var e in this.propertyEditors){
				if(e != "backgroundImage" && e !="backgroundColor" && e != "backgroundClip"){
					this.propertyEditors[e].set("disabled",true);
				}
			}		
		}
		if(widget.style1("background-size") && "auto contain cover".indexOf(widget.style1("background-size")) != -1){
			this.propertyEditors["backgroundSizeH"].set("disabled",true);
		}
	}
[#--
//	   ,onChange:function(value,name,htmlName){
////		,onValueChange:function(/*widget*/widget,/*String*/name,/*Object*/value){
//			console.error(this.declaredClass,"onValueChange:",this.name,name,value);
//			widget.metadata(this.name+"."+name,value);
////				if(name == "opacity"){
////					name = "filter";
////					value = "alpha(opacity=" + value * 100 +")";
////				}
//		}
//		,toHtml:function(value,widget,sourceType){		
//			//background: #00FF00 url(bgimage.gif) no-repeat fixed top;
//			var string = "background:{backgroundColor} {backgroundImage} {backgroundRepeat} {backgroundAttachement} {backgroundPositionX} {backgroundPositionY} {backgroundSizeW} {backgroundSizeH}";
//			var style = "";
//			
//			var mixValue = lang.mixin({
//				backgroundColor:""
//					,backgroundImage:""
//					,backgroundRepeat:""
//					,backgroundAttachement:""
//					,backgroundPositionX:""	
//					,backgroundPositionY:""	
//					,backgroundSizeW:""
//					,backgroundSizeH:""	
//					,opacity:""
//				},value);
//
//			if(mixValue.backgroundImage != ""){
//				mixValue.backgroundImage = "url('" + mixValue.backgroundImage +"')";
//			}
//			
//			if(mixValue.opacity != ""){
//				if(dojo.isWebKit != undefined){
//					style += "opacity:" + mixValue.opacity +";" 
//				 }else if(dojo.isMozilla != undefined){
//					 style += "opacity:" + mixValue.opacity +";"
//				 }else if(dojo.isOpera != undefined){
//					 style += "opacity:" + mixValue.opacity +";"
//				 }else if(agile.isIE >= 10){
//					 style += "opacity:" + mixValue.opacity +";"
////						 style += "filter:alpha(opacity=" + parseFloat(mixValue.opacity) * 100 +");"
//				 }
//			}
////				//console.log("toHtml:",value);
//			style += lang.replace(string,mixValue).trim();
//			
//			return style;
//		}
//		,toJson:function(value,widget,sourceType){	
//			//console.log("toJson:",value);
//			return "background:";
//		}
--]
[/@]